<template>
  <div>
    <el-select
      filterable
      v-model="selectValue"
      @change="handleChange"
      clearable
      multiple
      class="mb20 mr20"
      style="width: 40%"
    >
      <el-option
        v-for="(item,index) in selectData"
        :key="index"
        :label="item.evalTypeName"
        :value="item.evalTypeId"
      />
    </el-select>
    <el-tooltip
      class="item"
      effect="light"
      content="下拉选择类型后，穿梭框左侧展示相应数据，勾选点击按钮到右侧，点击下一步"
      placement="top"
    >
      <i class="fs16 el-icon-warning-outline"></i>
    </el-tooltip>
    <x-transfer
      @postData="handlePostData"
      :titles="['待选考评项目', '已选考评项目']"
      :from="fromData"
      :to="toData"
      class="mt20"
      ref="xTransfer"
    />
  </div>
</template>

<script>
import XTransfer from '@/components/XTransfer'
import { getEvalParent, evalItemGet, getByEvalTarget } from '@/api/eval'

export default {
  components: {
    XTransfer
  },
  data() {
    return {
      selectValue: null,
      fromData: [],
      toData: [],
      selectData: [],
      value: null,
      saveArr: [],
      type: this.$route.params.type
    }
  },
  // mounted() {
  //   getEvalParent().then(res => {
  //     this.selectData = res.data
  //   })
  // },
  methods: {
    getSelectData(param) {
      getByEvalTarget(param).then(res => {
        // console.log('考评项目', res.data)
        let arr = res.data.filter(v => v.evalItemList.length > 0)
        this.selectData = [...arr]
      })
    },
    // 第一步选择的考评对象传递值数字
    getTargetMode(num) {
      this.getSelectData({ evalTarget: num })
    },
    getArrData() {
      this.$emit('postArrData', this.toData)
    },
    // 编辑回显数据
    parSetArr(arr) {
      if (arr.length > 0) {
        this.$nextTick(() => {
          arr = this.handleData(arr)
          this.toData = [...arr]
        })
      }
    },
    handleData(arr) {
      arr.map(v => {
        let type = v.rewardType === 1 ? '奖' : v.rewardType === 2 ? '惩' : '奖或惩'
        let type1 = v.rewardOrientation === 1 ? '分' : '钱'
        v.key = v.evalItemId
        v.label = v.evalItemName + '-' + type + '-' + type1
      })
      return arr
    },
    // XTransfer 传递出来的数据
    handlePostData(arr) {
      this.toData = [...arr]
    },
    // 下拉框切换 fromData 数据
    // async handleChange(val) {
    //   if (val) {
    //     const res = await evalItemGet(val)
    //     let arr = res.data
    //     arr.map(v => {
    //       v.key = v.evalItemId
    //       v.label = v.evalItemName
    //     })

    //     this.$nextTick(() => {
    //       this.fromData = [...arr]
    //       this.saveArr = [...arr]
    //     })
    //   } else {
    //     this.fromData = []
    //     this.saveArr = []
    //   }
    // },
    // 下拉框切换 fromData 数据
    async handleChange(val) {
      // console.log('val', val)
      let arr = []
      if (val.length > 0) {
        this.selectData.map(v => {
          val.map(j => {
            if (v.evalTypeId === j) {
              arr = [...arr, ...v.evalItemList]
              arr = this.handleData(arr)
              this.$nextTick(() => {
                this.fromData = [...arr]
                // this.saveArr = [...arr]
              })
            }
          })
        })
      } else {
        this.fromData = []
      }
    },
    // 第一步选择模板之后，给到右边的数据
    setArr(arr) {
      if (this.type === 'add') {
        this.toData = [...arr]
      }
    },
    postData() {
      this.$refs.xTransfer.postToData()
      if (this.toData.length > 0) {
        let arr = []
        this.toData.map(j => {
          arr.push({ evalItemId: j.key })
        })
        this.$emit('postData', true, arr, 2)
        return false
      } else {
        this.$message.error('请至少选择一条')
        this.$emit('notSubmit', 2)
      }
    }
  }
}
</script>
